<template>
	<div class="login-page">
        <div class="login-wrap">
            <div class="login-box">
                <h5>找回密码</h5>
                <el-form :model="userInfo" :rules="rules" ref="baseForm">
                    <el-form-item prop="phone">
                        <el-input v-model="userInfo.phone" placeholder="请输入手机号">
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input type="password" v-model="userInfo.password" placeholder="请输入密码">
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="repsd">
                        <el-input type="password" v-model="userInfo.repsd" placeholder="请重复输入密码">
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="code">
                        <el-row>
                            <el-col :span="14">
                                <el-input v-model="userInfo.code" placeholder="请重输入验证码"></el-input>
                            </el-col>
                            <el-col :span="10" style="text-align: center;">
                                <el-button type="text" style="color: #fff;" @click="getCode">{{isDisabled ? `${countdown}s重新获取`:'获取验证码'}}</el-button>
                            </el-col>
                        </el-row>
                    </el-form-item>
                </el-form>
                <div class="flex f-be f-mi">
                    <el-button style="color:#fff;" type="text" @click="goLogin">用户登录</el-button>
                    <el-button class="login-btn" type="primary" @click="submit">GO</el-button>
                </div>
            </div>
        </div>
        <div class="login-info">
            <div class="marg-R1 t-cen">
                <img class="pic" src="../assets/images/xcx1.png" alt="">
                <p class="t-color-w">微信小程序</p>
            </div>
            <div class="marg-R1 t-cen">
                <img class="pic" src="../assets/images/app.png" alt="">
                <p class="t-color-w">安卓APP</p>
            </div>
            <div class="txt">
                <p class="t-color-w">Copyright雍政（辽宁）法律服务有限公司</p>
                <p class="t-color-w">客服电话: 17640013355</p>
                <p class="t-color-w">备案号：辽ICP备2024030705号-2</p>
            </div>
        </div>
 	</div>
</template>
<script>
	import { http } from "../assets/js/utils/http"
    export default {
        data() {
            return {
                userInfo: {
                    phone: '',
                    password: '',
                    repsd: '',
                    code: ''
                },
                tips: '获取验证码',
                seconds: 10,
                rules: {
                    phone: [{ required: true,message: '请输入手机号',trigger: 'blur'}],
                    password: [{ required: true,message: '请输入密码',trigger: 'blur'}],
                    repsd: [{ required: true,message: '请输入重复密码',trigger: 'blur'}],
                    code: [{ required: true,message: '请输入验证码',trigger: 'blur'}]
                },
                countdown: 60,
                isDisabled: false,
                timer: null,
            }
        },
        beforeDestroy() {
            if(this.timer) {
                clearInterval(this.timer);
            }
        },
        methods: {
            goLogin() {
                this.$router.push('/login')
            },
            getCode(){
                if(!this.userInfo.phone) {
                    this.$message({
                        message: '请输入手机号',
                        type: 'error'
                    })
                    return false
                }
                this.isDisabled = true
                this.tips = `倒计时${this.countdown}S`
                this.countdown = 60;
                this.timer = setInterval(() => {
                    if (this.countdown > 0) {
                        this.countdown--;
                    } else {
                        clearInterval(this.timer);
                        this.isDisabled = false
                    }
                }, 1000);
                const formData = new FormData();
                formData.append('phone',this.userInfo.phone);
                http({
                    url: '/code',
                    method: 'POST',
                    data: formData
                }).then(res => {
                    if(res.code == 200) {
                        this.$message({
                            message: '发送成功',
                            type: 'success'
                        })
                    } else {
                        this.$message.error(res.message)
                    }
                }).catch((error) => {
                    console.log(error,'ffff')
                })
            },
            end(){
                this.$message('倒计时结束');
            },
            start(){
                this.$message('倒计时开始');
            },
            submit(){
                this.$refs.baseForm.validate().then(res => {
                    this.loading = true
                    const formData = new FormData();
                    formData.append('phone',this.userInfo.phone);
                    formData.append('password',this.userInfo.password)
                    formData.append('password_confirm',this.userInfo.repsd);
                    formData.append('code',this.userInfo.code)
                    http({
                        url: '/password',
                        method: 'POST',
                        data: formData
                    }).then(res => {
                        if(res.code == 200) {
                            this.$message({
                                message: '修改成功',
                                type: 'success'
                            })
							this.userInfo.phone = ''
							this.userInfo.password = ''
							this.userInfo.repsd = ''
							this.userInfo.code = ''
                            this.$router.push('/login')
                        } else {
                            this.$message.error(res.message)
                        }
                    }).catch((error) => {
                        
                    })
                }).catch(errors => {
                    
                })
            }
        }
    }
</script>
<style lang="less" scoped>
.login-page{
    position: fixed;
    top: 0;
    bottom: 0;
    overflow: hidden;
    width:100%;
    height: 100vh;
    position: relative;
    background: url("../assets/images/bg.png");
    background-size: 100% auto;
    .login-info{
        width: 600px;
        position: absolute;
        left: 50%;
        margin-right: -250px;
        bottom: 50px;
        display: flex;
        .pic{
        width: 60px;
        }
        .txt{
            line-height: 24px;
        }
    }
    // .login-box{
    //     width: 500px;
    //     border-radius: 8px;
    //     padding: 30px;
    //     margin: 0 auto;
    //     .title{
    //         font-size: 16px;
    //         font-weight: 700;
    //         color: rgba(56, 56, 56, 1);
    //         margin: 20px 0;
    //     }
    //     .sub-btn{
    //         width: 200px;
    //         height: 32px;
    //         line-height: 32px;
    //         padding: 0;
    //         border-radius: 25px;
    //     }
    // }
    // .login-info{
    //     width: 100%;
    //     margin-top: 30px;
    //     justify-content: center;
    // }
}
.login-wrap{
  width: 400px;
  height: 100vh;
  padding-top: 15%;
  position: relative;
  background: rgba(255,255,255,0.2);  
  /deep/.login-box{
    position: relative;
    width: 240px;
    height: 450px;
    margin: 0 auto;
    border-radius: 8px;
    h5{
      font-size: 16px;
      color: #fff;
      text-align: center;
      margin-bottom: 30px;
    }
    .el-input {
      width: 100%;
      .el-input__inner{
        width: 100%;
        height: 33px;
        border: none;
        background: #ffffff;
        border-radius: 50px;
        height: 38px;
        font-size:14px;
        outline: none;
      }
    }
    .logo{
      text-align: center;
      margin: 20px 0;
      img{
        vertical-align: middle;
      }
      p{
        color: #fff;
        font-size: 24px;
        margin-left: 10px;
      }
    }
    .login-btn{
      padding: 0;
      margin: 0;
      width: 35px;
      height: 18px;
      line-height: 18px;
      text-align: center;
      color: #fff;
      border: none;
      border-radius: 20px;
      background: #4c4c4c;
    }
  }
  
}
</style>